<template>
  <div class="about">
    <first-abput />
    <hr />
    <second-abput></second-abput>

    <h1>This is an about page</h1>
    {{ count }} / {{ doubleCount }}
    <!--    <button @onclick="fun" >increment</button>-->
    <el-button @click="fun">increment</el-button>
  </div>
</template>

<style lang="less" scoped>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>
<script setup lang="js">
import { useCounterStore } from '@/stores/counter.js'
import { storeToRefs } from 'pinia'
import FirstAbput from '@/components/about/FirstAbput.vue'
import SecondAbput from '@/components/about/SecondAbput.vue'
import { useTodos } from '@/stores/todos'
const counterStore = useCounterStore()
// 保证解构出的 count 和 double 是响应式的
const { count, doubleCount } = storeToRefs(counterStore)
const todos = useTodos()

const fun = () => {
  todos.test()
  counterStore.increment()
}
</script>
